<template>
  <div class="about-post-film">
    <h2 class="tf">FILM</h2>
    <h3 class="pf">电影</h3>
    <div class="post-film-container">
      <div class="post-film-slider" v-if="!show">
        <div class="slideBox">
          <div class="bd">
            <div class="tempWrap">
              <ul :style="`left: -${index* 655}px`">
                <li>
                  <img src="../assets/image/swiper/5.jpg" alt="">
                  <div class="swiper-info">ADR录音棚</div>
                </li>
                <li>
                  <img src="../assets/image/swiper/1.jpg" alt="">
                  <div class="swiper-info">调色棚</div>
                </li>
                <li>
                  <img src="../assets/image/swiper/2.jpg" alt="">
                  <div class="swiper-info">杜比全景声棚</div>
                </li>
                <li>
                  <img src="../assets/image/swiper/3.jpg" alt="">
                  <div class="swiper-info">Avid S6</div>
                </li>
                <li>
                  <img src="../assets/image/swiper/4.jpg" alt="">
                  <div class="swiper-info">杜比7.1混录棚</div>
                </li>
                <li>
                  <img src="../assets/image/swiper/5.jpg" alt="">
                  <div class="swiper-info">ADR录音棚</div>
                </li>
                <li>
                  <img src="../assets/image/swiper/1.jpg" alt="">
                  <div class="swiper-info">调色棚</div>
                </li>
              </ul>
            </div>
          </div>
          <div class="slide-prev-btn" @click="onPrev">&lt;</div>
          <div class="slide-next-btn" @click="onNext">&gt;</div>
        </div>
        <div class="about-more-container">
          <div class="about-mb" @click="onShow">
            <span></span>
            <i>MORE</i>
          </div>
        </div>
      </div>
      <div class="post-film-infos" v-if="show">
        <post-film-info @isShow="show = $event"></post-film-info>
      </div>
    </div>
  </div>
</template>
<script>
import PostFilmInfo from '@/components/PostFilmInfo.vue'
export default {
  data() {
    return {
      index:1,
      show:false
    }
  },
  components: {
    PostFilmInfo
  },
  methods: {
    onShow() {
      this.show = true
    },
    onPrev() {
      this.index--
      if(this.index<=0){
        this.index=5
      }
      console.log(this.index);
    },
    onNext() {
      this.index++
      if(this.index>=5){
        this.index=0
      }
      console.log(this.index);
    },
  },
}
</script>
<style lang="sass">
.about-post-film
  width: 100%
  .tf
    font-family: 'Times Regular', 'Times New Roman', Times, Serif
  .pf
    font-family: 'PingFangTC-light', 'Lantinghei SC', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif
  .post-film-container
    width: 100%
    .post-film-slider
      .slideBox
        position: relative
        width: 100%
        height: auto
        overflow: hiddene
        .bd
          position: relative
          height: 100%
          z-index: 0
          .tempWrap
            overflow: hidden
            position: relative
            width: 655px
            ul
              width: 4585px
              position: relative
              overflow: hidden
              padding: 0
              margin: 0
              left: -655px
              display: flex
              transition: 1s
              li
                width: 655px
                position: relative
                img
                  width: 100%
                .swiper-info
                  position: absolute
                  right: 0
                  bottom: 0
                  width: 100%
                  line-height: 3.75em
                  background-color: rgba(0,0,0,0.8)
                  text-align: center
                  font-size: 12px
        .slide-prev-btn,.slide-next-btn
          position: absolute
          display: block
          top: 50%
          background: rgba(0,0,0,0.8)
          width: 60px
          height: 40px
          line-height: 40px
          text-align: center
        .slide-prev-btn
          left: 0
        .slide-next-btn
          right: 0
      .about-more-container
        text-align: center
        margin-top: 22px
        .about-mb
          position: relative
          display: inline-block
          width: 44px
          height: 44px
          cursor: pointer
          &:before
            content: ""
            display: block
            position: absolute
            width: 44px
            height: 22px
            border: 1px solid #fff
            border-bottom-width: 0
            border-radius: 22px 22px 0 0
            box-sizing: border-box
          span
            position: absolute
            top: 0
            right: 0
            bottom: 0
            left: 0
            width: 100%
            height: 100%
            transition: 0.3s
            &::before
              content: ""
              display: block
              position: absolute
              top: 50%
              left: 50%
              width: 1px
              height: 22px
              background: #fff
              transform: translateY(-50%) rotate(90deg)
            &::after
              content: ""
              display: block
              position: absolute
              top: 50%
              left: 50%
              width: 1px
              height: 22px
              background: #fff
              transform: translateY(-50%)
          i
            position: absolute
            left: 0
            top: 80%
            width: 100%
            height: 44px
            font-style: normal
            text-align: center
          &:hover
            span
              transition: .5s
              transform: rotate(90deg)
    .post-film-infos
      width: 100%
</style>
